<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的博客</title>
	<link rel="stylesheet" href="../assets/css/blog.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
		body{
            background-color: #fff;
            font: 16px 微软雅黑,宋体,Arial,sans-serif;
        }
		#Mycanvas{
			position: absolute;
			z-index: -111;
		}
        #app{
            width: 100%;
            position: relative;
        }
        /* 将iframe铺满整个屏幕 */
        #loding {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
	</style>
</head>
<body>
    <video id="bgMusic" controls="true" autoplay="true" name="media" loop="true" hidden="true"> <source src="../assets/music/bgMusic.mp3" type="audio/mpeg"></video>
    <iframe id="loding" src="../components/Loding.html" frameborder="0"></iframe>
	<div id="app" style="display: none;">
        <div class="container">
            <!-- 左侧信息 -->
            <div class="left-card">
               <div class="main">
                   <div class="avatar">
                       <div class="avatarImg" style="cursor: pointer;">
                           <img src="../assets/img/avatar.jpg" class="xwcms">
                           <i class="fa fa-music music-icon"></i>
                       </div>
                   </div>
                   <p class="name">蜡笔不新</p>
                   <p class="desc">{{left.desc}}</p>
                   <div class="tab">
                        <!-- 状态图标 -->
                        <!-- <a href="https://github.com/wheat0420"><span class="dot dotColor"></span>GitHub</a> -->
                        <a href="https://gitee.com/BaldSuperman" target="_blank"><span class="dot dotColor"></span>Gitee</a>
                        <a href="mailto:1356557225@qq.com"><span class="dot"></span>E-Mail</a>
                        <a href="tencent://message/?uin=1356557225" target="_blank" rel="nofollow"><span class="dot"></span>QQ</a>
                   </div>
                   <div class="statistic">
                       <div class="item division">
                            <h3 class="text">文章</h3>
                            <h3 class="num blog">0</h3>
                        </div>
                       <div class="item division">
                            <h3 class="text">粉丝</h3>
                            <h3 class="num fanCount">99+</h3>
                        </div>
                       <div class="item">
                            <h3 class="text">分类</h3>
                            <h3 class="num classify">3</h3>
                        </div>
                   </div>
                   <!-- 排行榜 -->
                   <div class="ranking">
                       <h3 class="title">排行榜</h3>
                       <ul class="ranking-list">
                       </ul>
                   </div>
                   <div class="back">
                        <a href="../index.html">返回首页</a>
                   </div>
               </div>
           </div>
           
           <!-- 右侧内容 -->
           <div class="right-content">
               <canvas id="Mycanvas"></canvas>
               <div class="group-content">
               </div>
           </div>
       </div>
       <div class="back-to" id="toolBackTop">
		    <a title="返回顶部" onclick="backTop()" href="#top" class="back-top"></a>
	    </div>
        <div id="menu"></div>
    </div>
</body>
<script src="../MVVM.js"></script>
<script src="../assets/js/canvasBg.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="../assets/js/blog.js"></script>
<script type="text/javascript">
	document.getElementsByClassName('container')[0].style.height = window.innerHeight - 16 + 'px';

    const vm = new MVVM({
        el:'#app',
        data:{
            left:{
                avatar:'',
                name:'蜡笔不新',
                desc:'一个热爱编程的大学生',
            }
        },
    })
// 检测当前是电脑还是手机
var userAgent = navigator.userAgent.toLowerCase();
var isMobile = /mobile/i.test(userAgent);
if (!isMobile) {
        //定义画布宽高和生成点的个数
    var WIDTH = window.innerWidth *0.8, HEIGHT = window.innerHeight - 18, POINT = 35;
    var canvas = document.getElementById('Mycanvas');
    canvas.width = WIDTH,
    canvas.height = HEIGHT;
    var context = canvas.getContext('2d');
    context.strokeStyle = 'rgba(0,0,0,0.02)',
    context.strokeWidth = 1,
    context.fillStyle = 'rgba(0,0,0,0.05)';
    var circleArr = [];
    $('.android').remove();
}else{
    $('.computed').remove();
}

function backTop() {
    $('html,body').animate({scrollTop:0},500);
    $('.right-content').animate({scrollTop:0},500);
}

/*==================== SHOW SCROLL UP ====================*/ 
function scrollUp(){
    const scrollUp = document.getElementById('toolBackTop');
    // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
    if(this.scrollY >= 80) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

function music() {
    var video = document.getElementById("bgMusic"); // 获取视频元素
    if (video.paused) {
        video.play(); // 调用play()函数播放视频
        // 去除css的animation
        $('.xwcms').css('animation','rotate 4s linear infinite');
        $('.music-icon').css('animation','im_icon 1s linear infinite');
        return
    }
    video.pause(); // 调用pause()函数停止视频播放
    $('.xwcms').css('animation','none');
    $('.music-icon').css('animation','none');
}
$('.avatarImg').on('click',music)
</script>
<script src="/assets/js/more.js"></script>
</html>